body {
    --dpm-font: var(--dds-font-regular-normal-300, "400 12px/1.5 monospace");
    --dpm-font-family-base: var(--dds-font-family-base, "monospace");
    --dpm-font-size-300: var(--dds-font-size-300, 50px);
    --dpm-font-size-350: var(--dds-font-size-350, 50px);
    --dpm-font-size-400: var(--dds-font-size-400, 50px);
    --dpm-font-weight-bold: var(--dds-font-weight-bold, 700);
    --dpm-font-line-height-normal: var(--dds-font-line-height-normal, 3);
    --dpm-background-default: var(--dds-color-common-background-default, red);
    --dpm-color-common-text-primary: var(--dds-color-common-text-primary, red);
    --dpm-space-050: var(--dds-space-050, 100px);
    --dpm-space-100: var(--dds-space-100, 100px);
    --dpm-space-200: var(--dds-space-200, 100px);
    --dpm-space-300: var(--dds-space-300, 100px);
    --dpm-space-400: var(--dds-space-400, 100px);
    --dpm-space-800: var(--dds-space-800, 100px);
    --dpm-color-brand-primary: var(--dds-color-blue-70, red);
    --dpm-color-brand-secondary: var(--dds-color-blue-50, red);
    --dpm-color-brand-tertiary: #1B1A18;
    --dpm-color-brand-stroke-secondary: var(--dds-color-blue-50, red);
    --dpm-color-brand-stroke-tertiary: #1B1A18;
}

    body[data-theme=dark] {

    }

html, body {
    margin: 0px;
    padding: 0px;
    background-color: var(--dpm-background-default);
    font: var(--dpm-font);
    color: var(--dpm-color-common-text-primary);
    height: 100%;
    transition: all linear 0.2s;
}

header, footer {
    min-width: 768px;
    padding: var(--dpm-space-200);
}

/* FluentUI override */
body {
    --body-font: var(--dpm-font-family-base);
    --accent-fill-rest: var(--dpm-color-brand-primary);
    --accent-stroke-control-active: var(--dpm-color-brand-primary);
    --type-ramp-base-font-size: var(--dpm-font-size-300);
    --type-ramp-base-line-height: var(--dpm-font-line-height-normal);
}

.appBar {
    width:80px
}

.highlight {
    background-color: lightskyblue;
    padding: 0 2px;
    border-radius: 2px;
}